<template>
    <div>
        <h2>门店列表</h2>
        <div>
            <span> 门店名称:</span>
            <input type="text" v-model="model.ShopName">
            <span> 服务范围:</span>
            <select type="date" v-model="model.ShopType">
                <option value="-1">请选择</option>
                <option value="免费洗车">免费洗车</option>
                <option value="免费停车">免费停车</option>
                <option value="早餐早点">早餐早点</option>
            </select>
            <input type="button" value="查询" @click="ok" class="btn btn-success">
        </div>
        <table class="table table-bordered">
            <tbody>
                <tr class="bg-primary">
                    <td>门店名称</td>
                    <td>时间</td>
                    <td>服务范围</td>
                    <td>店主</td>
                    <td>联系电话</td>
                    <td>门店介绍</td>
                    <td>门店地址</td>
                    <td>图片</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>



                <tr v-for="item in data.list" :key="item.Id">
                    <td>{{ item.ShopName }}</td>
                    <td>{{ item.CreateTime }}</td>
                    <td>{{ item.ShopType }}</td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>{{ item.JieShao }}</td>
                    <td>{{ item.Adder }}</td>
                    <td> <img :src="item.Photo" alt="" width="100" height="100"></td>
                    <td>{{ item.State == 1 ? '启用' : '禁用' }}</td>
                    <td>
                        <input type="button" value="编辑" class="btn btn-primary" @click="shopedit(item.Id)">
                        <input type="button" value="删除" class="btn btn-danger" @click="shopdel(item.Id)">
                    </td>
                </tr>

            </tbody>
        </table>
        <span>总条数:{{ data.count }}</span>
        <span>每页:{{ model.size }}条</span>
        <span>当前:{{ model.index + '/' + data.page }}条</span>
    </div>

    <div>
        <input type="button" value="首页" class="btn btn-info" @click="getpage('a')">
        <input type="button" value="上一页" class="btn btn-info" @click="getpage('b')">
        <input type="button" value="下一页" class="btn btn-info" @click="getpage('c')">
        <input type="button" value="尾页" class="btn btn-info" @click="getpage('d')">
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const router = useRouter();




//门店列表
let model = reactive({
    ShopName: '',
    ShopType: -1,
    index: 1,
    size: 2,
})


let data: any = reactive({
    list: [],
    count: 0,
    page: 0,
})


onMounted(() => {
    ok();
})
const ok = () => {
    axios({
        url: 'https://localhost:7276/api/Shop/ShopList',
        method: 'get',
        params: model,
    })
        .then((res) => {
            console.log(res);
            data.list = res.data.list;
            data.count = res.data.count;
            data.page = res.data.page;

        })
        .then((err) => {
            console.log(err);
        })
}

//编辑
const shopedit = (Id: any) => {
    router.push({ 
        path: '/shopUpd',
        query: { Id: Id }
    });
}



//删除门店

const shopdel = (Id: any) => {
    var f = confirm('确定要删除吗？');
    if (f == true) {


        axios({
            url: 'https://localhost:7276/api/Shop/ShopDel',
            method: 'delete',
            params: { Id: Id },
        })
            .then((res) => {
                if (res.data > 0) {
                    alert('删除成功');
                    ok();
                }
                else {
                    alert('删除失败');
                    return;
                }
            })
            .then((err) => {
                console.log(err);
            })



    }



}



//分页
const getpage = (str: any) => {

    switch (str) {

        //首页
        case 'a':
            if (model.index == 1) {
                return;
            }
            model.index = 1;
            break;

        //上一页
        case 'b':
            if (model.index == 1 && data.page) {
                return;

            }
            model.index--;
            break;


        //下一啊实打实大叔大婶撒大大阿达的页
        case 'c':
            if (model.index == data.page) {
                return;

            }
            model.index++;

            break;


        //尾页
        case 'd':

            if (model.index == data.page) {
                return;

            }
            model.index = data.page
            break;


    }
    ok();//重新获取数据
}
</script>

<style scoped></style>